<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="关系分析图" name="first">
        <div v-loading="loading" style="height: 500px;margin-bottom: 180px;">
          <div style="display: flex;text-align: center;align-items: center;">
            <span>时间：</span>
            <el-date-picker v-model="value1" type="datetimerange" range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期" value-format="yyyy-MM-dd HH:MM:ss" @change="changeDatePicker">
            </el-date-picker>
            <div style="margin-left: 120px;">
              <div class="title">企业登录率与解锁率关系分析</div>
              <div class="subtitle">气泡大小代表用户数量，颜色区分不同表现区域</div>
            </div>
          </div>
          <scatter-chart v-if="scatterData.length" :scatterData="scatterData" />
          <!-- .slice(0,3) -->
          <el-empty v-else description="暂无数据"></el-empty>
        </div>
      </el-tab-pane>
      <el-tab-pane label="统计报表" name="second">
        <basic-table :table-title="tableTitle" :data-source="dataSource" :button-group="buttonGroup"
          :search-form="searchForm" :model-type="'companyReport'" :multiple-table="false" :reload="reload"
          @closeReload="closeReload">
          <template v-slot:UserCompanyName="scope">
            <el-popover placement="right" trigger="click">
              <div v-loading="loadingline" style="max-height: 600px;overflow: auto;width: 500px;padding: 20px;">
                <div style="margin-bottom: 20px;">
                  <span>时间：</span>
                <el-date-picker 
                    v-model="value2" 
                    type="daterange" 
                    range-separator="至" 
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    format="yyyy-MM-dd" 
                    value-format="yyyy-MM-dd"
                    :picker-options="pickerOptions" 
                    @change="changeDatePicker2">
                </el-date-picker>
                </div>
                <LineChart v-if="lineData.length" :lineData="lineData" :lineTitle="lineTitle" />
                <el-empty v-else description="暂无数据"></el-empty>
              </div>
              <el-button type="text" slot="reference" @click="getId(scope.row)">{{ scope.row.UserCompanyName
                }}</el-button>
            </el-popover>
          </template>
          <template v-slot:UsageRate="scope">
            <div style="color: #E6A23C">
              {{ scope.row.UsageRate }}
            </div>
          </template>
        </basic-table>
      </el-tab-pane>
      <!-- <el-tab-pane label="企业属性图" name="third">
        <bar-chart v-if="dataSource" :dataSource="dataSource" />
      </el-tab-pane> -->
    </el-tabs>



  </div>
</template>
<script>
import { getCompanyUserForms, getLoginUnlockRatioAnalysis, getUserNumAndLoginRatioAnalysis } from '@/api/report'
import BasicTable from '@/components/BasicTable/index.vue'
import ScatterChart from './components/scatterChart.vue'
import LineChart from './components/lineChart.vue'
import BarChart from './components/barChart.vue'


export default {
  name: 'Comapny',
  components: { BasicTable, ScatterChart, LineChart, BarChart },
  data() {
    return {
      activeName: 'first',
      value1: '',
      value2: '',
      loadingline:false,

      reload: false,
      dataSource: () => getCompanyUserForms,
      tableTitle: [
        {
          label: '用户所属企业',
          value: 'UserCompanyName',
          show: true,
          type: 'slot',
          slot: 'UserCompanyName',
          width: 300
        },

        {
          label: '用户总数',
          value: 'UserNum',
          show: true,
          type: 'text',
        },
        {
          label: '登录用户数',
          value: 'LoginUserNum',
          show: true,
          type: 'text'
        },
        {
          label: '登录次数',
          value: 'LoginNum',
          show: true,
          type: 'text',
        },
        {
          label: '使用率',
          value: 'UsageRate',
          show: true,
          type: 'slot',
          slot: 'UsageRate'
        },
        {
          label: '搜索企业次数',
          value: 'SearchCompanyNum',
          show: true,
          type: 'text'
        },
        {
          label: '查看企业详情次数',
          value: 'CompanyInfoNum',
          show: true,
          type: 'text'
        },
        {
          label: '解锁企业次数',
          value: 'CompanyUnlockNum',
          show: true,
          type: 'text'
        },
        {
          label: '添加客户数',
          value: 'AddClientNum',
          show: true,
          type: 'text'
        }
      ],
      searchForm: {
        expend: true,
        title: '',
        fields: [
          {
            show: true,
            type: 'datetimerange',
            label: '统计时间',
            labelShow: true,
            name: 'time'
          },
          {
            show: true,
            type: 'select',
            label: '排序方式',
            labelShow: true,
            name: 'sortFieldId',
            options: [
              { value: '1', label: '用户总数' },
              { value: '2', label: '登录用户数' },
              { value: '3', label: '登录次数' },
              { value: '4', label: '使用率' },
              { value: '5', label: '搜索企业次数' },
              { value: '6', label: '查看详情次数' },
              { value: '7', label: '解锁企业次数' },
              { value: '8', label: '添加客户数' },
            ]
          },
          {
            show: true,
            type: 'select',
            label: '',
            labelShow: true,
            name: 'sortType',
            options: [
              { value: '0', label: '从少到多' },
              { value: '1', label: '从多到少' }
            ]
          },
        ]
      },
      buttonGroup: {
        // expend: true,
        // title: '表格筛选',
        // size: 'default',
        // fields: [
        //   {
        //     showButtonGroup: true,
        //     text: '重置条件',
        //     icon: '',
        //     type: 'text',
        //     callBack: () => {
        //       this.searchForm.reset = true
        //     }
        //   }
        // ]
      },
      scatterData: [],
      scatterParams: {},
      loading: false,
      lineData: [],
      lineParams: {},
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          // 当选中第一个日期时，记录选择的时间
          this.pickerOptions.minDate = minDate;
        },
        disabledDate: (time) => {
          if (this.pickerOptions.minDate) {
            // 计算一个月的时间戳（大约30天）
            const monthRange = 30 * 24 * 3600 * 1000;
            const maxDate = new Date(this.pickerOptions.minDate).getTime() + monthRange;
            const minDate = new Date(this.pickerOptions.minDate).getTime() - monthRange;
            
            // 只能选择一个月范围内的日期
            return time.getTime() > maxDate || time.getTime() < minDate;
          }
          return false;
        }
      }
    }
  },
  created() {
    // 刚进来默认当天日期
    this.getScatter()
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    changeDatePicker(v) {
      if (v === null) {
        this.scatterParams.startDate = ''
        this.scatterParams.endDate = ''
        this.getScatter(this.scatterParams)
      } else {
        this.scatterParams.startDate = v[0]
        this.scatterParams.endDate = v[1]
        this.getScatter(this.scatterParams)
      }
    },
    changeDatePicker2(v) {
      if (v === null) {
        this.lineParams.startDate = ''
        this.lineParams.endDate = ''
        this.getLine(this.lineParams)
      } else {
        this.lineParams.startDate = v[0]
        this.lineParams.endDate = v[1]
        this.getLine(this.lineParams)
      }
    },
    getScatter(params) {
      this.scatterData = []
      this.loading = true
      getLoginUnlockRatioAnalysis(params).then((res) => {
        this.scatterData = res.data.dataList
        this.loading = false
      })
    },
    getId(row) {
      this.lineTitle = row.UserCompanyName
      this.lineParams.userCompany = row.UserCompanyName
      this.lineParams.startDate = this.value2[0]
      this.lineParams.endDate = this.value2[1]
      this.getLine(this.lineParams)
    },
    getLine(params) {
      this.lineData = []
      this.loadingline = true
      getUserNumAndLoginRatioAnalysis(params).then((res) => {
        console.log(res)
        this.loadingline = false
        this.lineData = res.data.dataList
      })
    },
    closeReload(val) {
      this.reload = val
    },
  }
}
</script>

<style scoped>
.title {
  text-align: center;
  color: #333;
  margin: 10px;
  font-size: 16px;
  font-weight: bold;
}

.subtitle {
  text-align: center;
  color: #666;
  margin-bottom: 20px;
  font-size: 14px;
}
</style>
